/*
 * @Description: 
 * @Author: 刘翼
 * @Date: 2019-05-26 15:30:52
 * @LastEditTime: 2019-05-29 16:25:56
 * @LastEditors: 刘庆华
 */

/* 使导航条靠右 */

#fp-nav {
    right: 5px;
}

/* public 公共部分样式 */

.go, .more {
    position: fixed;
    right: 10px;
    z-index: 10;
}

.go {
    top: 100px;
    right: 50px;
}

.more {
    bottom: 50px;
    animation: more01 0.4s linear infinite alternate;
}

/* 屏幕容器样式 */

.content {
    width: 1000px;
    height: 700px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -500px;
}

/* 布局尽量使用定位Position，动画使用位移Translate */

/* 第一屏样式 */

.screen01 {
    background: url('../images/01-bg.png') no-repeat bottom center;
}

.screen01 .goods {
    position: absolute;
    top: 335px;
    right: 90px;
}

.screen01 .sofa {
    position: absolute;
    top: 250px;
    left: 270px;
    animation: sofa01 0.8s linear infinite alternate;
}

.screen01 .fly {
    position: absolute;
    top: 20px;
    right: -30px;
    /* 调用动画 */
    animation: fly01 0.6s linear infinite/* 逆播放*/
    alternate;
}

/* 第一屏动画 */

/* 定义动画序列 */

@keyframes fly01 {
    from {
        transform: translateY(-25px)
    }
    to {
        transform: translateY(25px)
    }
}

@keyframes more01 {
    from {
        transform: translateY(-10px)
    }
    to {
        transform: translateY(10px)
    }
}

@keyframes sofa01 {
    from {
        transform: translateY(-15px)
    }
    to {
        transform: translateY(10px)
    }
}

/* 第二屏样式 */

.screen02 {
    background: url('../images/02-bg.png') no-repeat bottom center;
}

.screen02 .message {
    text-align: center;
    margin-top: 50px;
}

.screen02 .text2 {
    position: absolute;
    opacity: 0;
}

.screen02 .goods {
    position: absolute;
    top: 268px;
    left: 50%;
    margin-left: -220px;
    transform: scale(0)
}

.screen02 .input {
    position: absolute;
    right: 220px;
    top: 220px;
    transform-origin: right top;
    opacity: 0;
}

.screen02 .goods .sofa2 {
    position: absolute;
    left: 61px;
    top: -35px;
    transform: scale(0.5);
    z-index: 10001;
}

.input .key {
    position: absolute;
    left: 100px;
    bottom: 10px;
    opacity: 0;
}

/* 第二屏动画 */

.screen02.now .input {
    /* 动画之后保持动画最后的属性 forwards ,默认是回复到原先的样式 backwards*/
    animation: input 1s linear forwards;
}

.screen02.now .key {
    opacity: 1;
    transition: all 0.2s linear 0.3s;
}

.screen02.now .goods {
    transform: none;
    transition: transform 0.5s linear 0.7s;
}

.screen02.now .text2 {
    position: static;
    opacity: 1;
    transition: opcaity 2s ease-in-out;
}

.screen02.now .text1 {
    position: absolute;
    opacity: 0;
    transition: opcaity 1s linear;
}

.screen02.leave .sofa2 {
    animation: sofa2 1.8s linear;
}

@keyframes sofa2 {
    from {
        opacity: 1;
    }
    to {
        opacity: 1;
        transform: translate(-80px, 800px)
    }
}

@keyframes input {
    0% {
        opacity: 1;
        transform: translate(3000px, 0)
    }
    33.3% {
        transform: translate(-160px, 120px)
    }
    66.6% {
        transform: translate(-160px, 120px)
    }
    100% {
        opacity: 1;
        transform: scale(0.7)
    }
}

/* 第三屏样式 */

.screen03 {
    background: url('../images/03-bg.png') no-repeat bottom center
}

.screen03 .sofa3 {
    position: absolute;
    top: 286px;
    right: 531px;
    opacity: 0;
    z-index: 10001
}

.screen03 .goodsinfo {
    position: absolute;
    top: 403px;
    left: 537px;
}

.screen03 .change1 {
    position: absolute;
}

.screen03 .change2 {
    opacity: 0;
    position: absolute;
}

.screen03 .car {
    position: absolute;
    top: 555px;
    left: 537px;
}

.screen03 .car .cart1 {
    position: absolute;
}

.screen03 .car .cart2 {
    position: absolute;
    opacity: 0;
}

/* 第三屏动画 */

.screen03.now .sofa3 {
    opacity: 1;
    transition: opacity 0.1ms linear 0.8s;
}

.screen03.now .change2 {
    opacity: 1;
    transition: opcaity 1s linear 3s;
}

.screen03.now .change1 {
    opacity: 0;
    transition: opcaity 1s linear 3s;
}

.screen03.now .cart2 {
    opacity: 1;
    transition: opcaity 1s linear 1s;
}

.screen03.leave .sofa3 {
    animation: sofa3 2s linear;
}

@keyframes sofa3 {
    from {
        /* 如果过度的时候需要旋转，那么最好先位移再进行旋转 */
        transform: translate(50px) rotate(16deg)
    }
    to {
        transform: translate(192px, 800px) rotate(16deg)
    }
}

/* 第四屏样式 */

.screen04 {
    background: url('../images/04-bg.png') no-repeat bottom center;
}

.screen04 .text {
    text-align: center;
    margin-top: 50px;
}

.screen04 .text .text2 {
    position: absolute;
    opacity: 0;
}

.screen04 .car {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100002;
    margin-bottom: 50px;
}

.screen04 .car .sofa4 {
    position: absolute;
    bottom: 190px;
    left: 65%;
    transform: translateX(-50%);
    z-index: -1;
    opacity: 0;
}

.screen04 .ad {
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
}

.screen04 .ad .address2 {
    position: absolute;
    top: 57px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
}

/* 第四屏动画 */

.screen04 .cloud {
    animation: cloud 5s linear infinite alternate;
}

.screen04.now .car .sofa4 {
    opacity: 1;
    transition: opacity 0.1ms linear 1s;
}

.screen04.now .car {
    animation: car4 2s ease-out 1.5s forwards;
}

.screen04.now .text .text1 {
    opacity: 0;
    transition: opacity 1s linear 3s;
}

.screen04.now .text .text2 {
    opacity: 1;
    left: 50%;
    transform: translateX(-50%);
    transition: all 1s ease-in 2s;
}

.screen04.now .ad {
    opacity: 1;
    transition: opacity 1s ease-in 3s;
}

.screen04.now .ad .address2 {
    opacity: 1;
    transition: opacity 1s ease-in 4s;
}

@keyframes car4 {
    from {
        transform: translateX(-1px)
    }
    to {
        transform: translateX(1000px)
    }
}

@keyframes cloud {
    from {
        transform: translateX(-1px)
    }
    to {
        transform: translateX(800px)
    }
}

/* 第五屏样式 */

.screen05 {
    background: url('../images/05-bg.png')
}

.screen05 .mouse {
    height: 100%;
    position: absolute;
    right: 300px;
    width: 350px;
    overflow: hidden;
    padding: 20px
}

.screen05 .mouse .mouse1 {
    position: absolute;
    bottom: 300px;
}

.screen05 .mouse .mouse2 {
    position: absolute;
    opacity: 0;
    bottom: 300px;
}

.screen05 .mouse .hand {
    position: absolute;
    bottom: 70px;
    right: 220px;
    transform: translateY(500px);
}

.screen05 .card .card1 {
    position: absolute;
    bottom: 250px;
    z-index: 1;
}

.screen05 .card img:last-child {
    position: absolute;
    left: 100px;
    bottom: 470px;
    transform: translateY(70px);
    opacity: 0;
}

.screen05 .sofa5 {
    position: absolute;
    transform: translate(100px, 280px) rotate(20deg);
    opacity: 0;
}

/* 第五屏动画 */

/* 手的动画 */

.screen05.now .hand {
    transform: none;
    transition: all 1s linear
}

.screen05.now .mouse1 {
    opacity: 0;
    transition: opacity 0.2s linear 1s;
}

.screen05.now .mouse2 {
    opacity: 1;
    transition: opacity 0.2s linear 1s;
}

.screen05.now .sofa5 {
    animation: sofa5 2s linear 2s forwards;
}

.screen05.now .card img:last-child {
    opacity: 1;
    transform: none;
    transition: all 1s linear 3s;
}

.screen05.leave .sofa5 {
    z-index: 999;
    animation: sofa6 2s linear;
}

@keyframes sofa5 {
    from {
        opacity: 1;
        transform: translate(100px, -200px) rotate(20deg)
    }
    50% {
        transform: translate(100px, 300px) rotate(20deg)
    }
    to {
        opacity: 1;
        transform: translate(100px, 380px) rotate(20deg)
    }
}

@keyframes sofa6 {
    from {
        opacity: 1;
        transform: translate(100px, 380px) rotate(20deg)
    }
    to {
        opacity: 1;
        transform: translate(100px, 880px) rotate(20deg)
    }
}

/* 第六屏 */

.screen06 {
    background: url('../images/06-bg.png') no-repeat bottom;
}

.screen06 .car6 {
    position: absolute;
    bottom: 20px;
    left: 220px;
}

.screen06 .car6 .add {
    position: absolute;
    bottom: 100px;
    left: 180px;
    opacity: 0;
}

.screen06 .car6 .buyer {
    position: absolute;
    bottom: 100px;
    left: 180px;
}

.screen06 .text6 img:first-child {
    position: absolute;
}

.screen06 .people .worker {
    position: absolute;
    bottom: 100px;
    right: 180px;
    transform: translate(-400px, 0) scale(0);
    transform-origin: left bottom;
}

.screen06 .postbox {
    opacity: 0;
}

.screen06 .people .person {
    position: absolute;
    bottom: 100px;
    right: 90px;
    transform: translateX(160px);
    opacity: 0;
}

.screen06 .text6 {
    transform: translate(180px, 180px)
}

.screen06 .people .door {
    position: absolute;
    bottom: 100px;
    right: -175px;
    opacity: 0;
}

.screen06 .people .say {
    position: absolute;
    bottom: 400px;
    right: 120px;
    opacity: 0;
}

/* 第六屏动画 */

.screen06.now {
    background: url('../images/06-bg.png') no-repeat 100% bottom;
    transition: background 2s linear 2s;
}

.screen06.now .buyer {
    opacity: 0;
    transition: opacity 0.5s ease-in 2s;
}

.screen06.now .add {
    opacity: 1;
    transition: opacity 0.5s ease-in 2.5s;
}

.screen06.now .postbox {
    animation: box 2s linear;
}

.screen06.now .text6 img:first-child {
    opacity: 0;
    transition: opacity 0.5s linear 4s;
}

.screen06.now .text6 img:last-child {
    opacity: 1;
    transition: opacity 0.5s ease-in 3s;
}

.screen06.now .people .worker {
    transform: none;
    transition: all 1s linear 4s;
}

.screen06.now .people .say {
    opacity: 1;
    transition: all 1s linear 5s;
}

.screen06.now .people .door {
    opacity: 1;
    transition: opacity 0.5s ease-out 6s;
}

.screen06.now .people .person {
    opacity: 1;
    transform: none;
    transition: all 1s linear 6.5s;
}

.screen06 .cloud6 .cloud1 {
    animation: cloud6 40s linear infinite alternate;
}

.screen06 .cloud6 .cloud2 {
    animation: cloud6 20s linear infinite alternate;
}

@keyframes cloud6 {
    from {}
    to {
        transform: translateX(1500px)
    }
}

@keyframes box {
    from {
        opacity: 1;
        transform: translate(-500px, 160px) scale(0.7)
    }
    50% {
        opacity: 1;
        transform: translate(200px, 160px) scale(1)
    }
    to {
        opacity: 1;
        transform: translate(100px, 500px) scale(0.6)
    }
}

/* 第七屏样式 */

.screen07 {
    background: url('../images/07-bg.png') no-repeat bottom center;
}

.screen07 .stargroup {
    position: absolute;
    bottom: 442px;
    left: 203px;
}

.screen07 .stargroup img {
    margin-left: 2px;
    display: none;
}

.screen07 .text7 {
    position: absolute;
    bottom: 380px;
    left: 220px;
    transform-origin: left bottom;
    transform: scale(0)
}

/* 第七屏动画 */

.screen07.leave .text7 {
    transform: scale(1);
    transition: all 0.6s linear 3s;
}

/* 第八屏 */

.screen08 {
    background: url('../images/08-bg.png')
}

.screen08 .btn {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%)
}

.screen08 .btn .btn2 {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0
}

.screen08 .btn:hover .btn2 {
    opacity: 1;
}

.screen08 .again{
    position: absolute;
    right: 0;
    top: 100px;
}
.screen08 .hand8{
    position: absolute;
}